<template >
  <li class="battery">
    <div class="power-header-box">{{leakageData.name}}</div>
    <div class = "isid" style="display: none">{{leakageData.deviceid}}</div>
    <!--<div class="power-content-box">
      <div class="power-content-left">采集状态:</div>
      <div class="power-content-right">
        <div class="device-status" :class="{device_status_active:leakageAlarm['786432']}"></div>
      </div>
    </div>-->
    <div class="power-content-box">
      <div class="power-content-left">漏电电流:</div>
      <div class="power-content-right">{{leakageAlarm["851969"]}} <strong>mA</strong> </div>
    </div>
    <div class="power-content-box">
      <div class="power-content-left">温度值1:</div>
      <div class="power-content-right">{{leakageAlarm["851970"]}} <strong>℃</strong> </div>
    </div>
    <div class="power-content-box">
      <div class="power-content-left">温度值2:</div>
      <div class="power-content-right">{{leakageAlarm["851971"]}} <strong>℃</strong> </div>
    </div>
    <div class="power-content-box">
      <div class="power-content-left">温度值3:</div>
      <div class="power-content-right">{{leakageAlarm["786435"]}} <strong>℃</strong> </div>
    </div>
    <div class="power-content-box">
      <div class="power-content-left">温度值4:</div>
      <div class="power-content-right">{{leakageAlarm["786497"]}} <strong>℃</strong> </div>
    </div>
    <div class="power-content-box">
      <div class="power-content-left">电压A:</div>
      <div class="power-content-right">{{leakageAlarm["786498"]}} <strong>V</strong> </div>
    </div>
    <div class="power-content-box">
      <div class="power-content-left">电压B:</div>
      <div class="power-content-right">{{leakageAlarm["786499"]}} <strong>A</strong> </div>
    </div>
    <div class="power-content-box">
      <div class="power-content-left">电压C:</div>
      <div class="power-content-right">{{leakageAlarm["786500"]}} <strong>V</strong> </div>
    </div>
    <div class="power-content-box">
      <div class="power-content-left">电流A:</div>
      <div class="power-content-right">{{leakageAlarm["786433"]}} <strong>V</strong> </div>
    </div>
    <div class="power-content-box">
      <div class="power-content-left">电流B:</div>
      <div class="power-content-right">{{leakageAlarm["786488"]}} <strong>hour</strong> </div>
    </div>
    <div class="power-content-box">
      <div class="power-content-left">电流C:</div>
      <div class="power-content-right">{{leakageAlarm["786487"]}} <strong>次</strong> </div>
    </div>
    <div class="batterybtn" @click="leakageMore">
      更多
    </div>
  </li>
</template>
<script>
  export default {
    name:'leakage',
    props:[
      "leakageData",
      "leakageNum",
      "leakageAlarm"
    ],
    data () {
      return {
        tableData1:[
          {
            name:"开关机状态",
            value:"开"
          },{
            name:"供电方式",
            value:"开"
          },
          {
            name:"电池状态",
            value:"电池充电状态"
          },
          {
            name:"报警数",
            value:12
          },
        ]
      }
    },
    methods: {
      leakageMore(){
        this.$emit('on-more',this.leakageData.deviceid);
      }
    }
  }
</script>
<style >
  .power-content-box{
    width: 180px;
    height: 25px;
    overflow: hidden;
    background: #fff;
    border-bottom:1px solid #ebeef5;
    position: relative;
  }
  .power-content-box:hover{
    background: #f5f7fa;
    cursor: pointer;
  }
  .power-content-left{
    float: left;
    width: 100px;
    height: 25px;
    line-height: 25px;
    text-align: center;
    font-size: 12px;
  }
  .power-content-right{
    float: left;
    width: 70px;
    height: 25px;
    line-height: 25px;
    text-align: center;
    font-size: 12px;
  }
  .power-content-box .power-content-number{
    font-size: 14px;
    font-weight: 600;
    color: red;
  }
  .power-content-more{
    float: left;
    width: auto;
    font-size: 12px;
    position: absolute;
    right: 5px;
    top: 4px;
  }
  .power-content-more:hover{
    color: red;
    cursor: pointer;
  }

  .device-status{
    width:13px;
    height:13px;
    border-radius: 50%;
    background: #13ce66;
    box-shadow: 2px 2px 3px #bfbeb8;
    margin: auto;
    margin-top: 5px;
  }
  .device_status_active{
    background: #ff4949;
  }
</style>
